<template>
	<view class="house_index">
		<xbd-pages-content title="住房申请">
			<template #content>
				<view class="content" :style="'minHeight:'+windowHeight+'px'">
					<view class="banner">
						<image src="../../static/images/home/homeBanner.png" mode=""></image>
					</view>
					<view class="body">
						<view class="card blue">
							<image class="icon" src="../../static/images/home/hotel.svg" mode=""></image>
							<view class="msg">
								<view class="num"><text>{{count.suite}}</text>间</view>
								<view class="tag">可预约套间</view>
							</view>
						</view>
						<view class="card blue2">
							<image class="icon" src="../../static/images/home/hotel.svg" mode=""></image>
							<view class="msg">
								<view class="num"><text>{{count.room}}</text>间</view>
								<view class="tag">可预约标间</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<xbd-apply-card :cardIcon="require('../../static/images/home/appoint.png')"
							:cardBg="require('../../static/images/meal/purple.png')" cardTag="我要预约"
							@clickApplyCard="myApply()"></xbd-apply-card>
						<xbd-apply-card :cardIcon="require('../../static/images/home/history.png')"
							:cardBg="require('../../static/images/meal/blue.png')" cardTag="历史申请"
							@clickApplyCard="history()"></xbd-apply-card>
						<xbd-apply-card :cardIcon="require('../../static/images/home/approval.png')"
							:cardBg="require('../../static/images/meal/yellow.png')" cardTag="我的审批"
							@clickApplyCard="approval()"></xbd-apply-card>
					</view>
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		House
	} from '@/api/index.js';
	export default {
		data() {
			return {
				windowHeight: 0,
				// permission: ['公寓主管', '后勤经理', '分管领导'],
				count: {
					suite: 0,
					room: 0
				}
			};
		},
		methods: {
			history() {
				uni.navigateTo({
					url: './historyApply/historyApply',
				})
			},
			myApply() {
				uni.navigateTo({
					url: `./appoint?suite=${this.count.suite}&room=${this.count.room}`,
				})
			},
			approval() {
				uni.navigateTo({
					url: './approval/approval',
				})
			},
			async getNum() {
				const res = await House.getNum()

				this.count = res.data.count
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			});
		},

		onShow() {
			this.getNum()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.banner {
		height: 140px;

		image {
			height: 140px;
			width: 100%;
		}
	}

	.body {
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 30px 50rpx;
		display: flex;
		margin-bottom: 5px;

		.card {
			position: relative;
			box-sizing: border-box;
			padding: 10px 40rpx;
			width: 300rpx;
			border-radius: 8rpx;

			.icon {
				position: absolute;
				top: 8px;
				left: 20rpx;
				width: 80rpx;
				height: 80rpx;
			}

			.msg {
				text-align: right;
				font-size: 24rpx;
				color: #FFFFFF;

				.num {
					text {
						font-size: 36rpx;
						margin-right: 20rpx;
					}
				}

				.tag {
					margin-top: 2px;
				}
			}
		}

		.blue {
			background-color: #457AFF;
			margin-right: 50rpx;
		}

		.blue2 {
			background-color: #A0BCFE;
		}
	}


	.bottom {
		flex: 1;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 30px 50rpx;

	}
</style>
